<!DOCTYPE html>
<html lang="en">
  <head>
    <title>COS 音视频</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <!--
      Need a visual blank slate?
      Remove all code in `styles.css`!
    -->
    <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
    <style>
      html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100%;
      }
      .video-js {
        width: 100%;
      }
      .video-js .vjs-big-play-button {
        top: 50%;
        left: 50%;
        margin-top: -0.81666em;
        margin-left: -1.5em;
      }
    </style>
  </head>

  <body>
    <video
      id="my-video"
      class="video-js"
      controls
      preload="auto"
      width="100%"
      height="450"
      data-setup="{}"
    >
      <source
        src="https://cos-video-1258344699.cos.ap-guangzhou.myqcloud.com/hls/test.m3u8"
        type="application/x-mpegURL"
      />
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank"
          >supports HTML5 video</a
        >
      </p>
    </video>

    <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script>
  </body>
</html>
